<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师后台-不学也通-学生</title>
    <link rel="shortcut icon" href="../康笑长结业课.jpg" type="image/x-icon">
    <style>
        .container {
            min-height: 100vh;
        }

        .container .nav {
            height: 100%;
            background-color: #fff;
        }

        .link-secondary{
            text-decoration: none;
        }
        .link-secondary:hover{
            color: #0d6efd !important;
        }
    </style>
</head>

<body>
    <!-- container是bootstrap的居中窄的显示方案 -->
    <div class="container bg-body">
        <div class="row">
            <div class="col-md-2 leftmenu" id="leftmenu">
                
            </div>
            <div class="col-md-9 col-xs-12 kc ms-3">
                <div class="row mt-3 pd-3 border-bottom border-secondary">
                    <div class="col-md-2">班级列表</div>
                    <div class="col-md-2 offset-md-8">
                        <a class="nav-link link-success" href="./createcourse.html">
                            <i class="bi bi-people-fill"></i>
                            添加班级
                        </a>
                    </div>
            </div>
            <div class="row mt-3">
                <!-- 添加学生 -->
                <div class="col-md-3 col-xs-12">
                    <input type="text" class="form-control" placeholder="手机号/学号">
                    <i class="bi bi-search" style="position: relative; bottom: 27px; left: 190px;"></i>
                </div>
                <div class="col-md-2 offset-md-7 col-xs-6 offset-xs-6">
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">添加学生</button>
                </div>
            </div>
            <div class="row mt-3">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>系部</th>
                            <th>班级</th>
                            <th>教学团队</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                        <!-- <tr>
                            <td>1</td>
                            <td>221142601005</td>
                            <td>王永申</td>
                            <td>计算机科学与应用</td>
                            <td>22级移动应用开发</td>
                            <td>移动应用开发</td>
                            <td>2022-09-01</td>
                            <td>
                                <button class="btn btn-primary btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">删除</button>
                            </td>
                        </tr> -->
                    </tbody>
                </table>
           </div>
       </div>
   </div>
</div> 
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5 text-success" id="exampleModalLabel">添加学生</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form id="studentForm">
                <!-- 手机号 -->
                <div class="mb-3">
                  <label for="tel" class="form-label">手机:</label>
                  <input name="tel" type="tel" required class="form-control" id="tel" aria-describedby="tel" placeholder="请输入手机号">
                </div>
                <!-- 学号 -->
                <div class="mb-3">
                    <label  for="sno" class="form-label">学号:</label>
                    <input name="sno" type="number" required class="form-control" id="sno" aria-describedby="tel" placeholder="请输入学号">
                </div>
                <!-- 姓名 -->
                <div class="mb-3">
                  <label  for="name" class="form-label">姓名:</label>
                  <input name="name" type="text" required class="form-control" id="name" aria-describedby="tel" placeholder="请输入姓名">
                </div>
                
              </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary text-white bg-danger" data-bs-dismiss="modal">取消</button>
          <button id="submit" type="button" class="btn btn-success">添加</button>
        </div>
      </div>
    </div>
  </div>
    <script type="module" src="../js/main.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(document).ready(function(){
            $("#submit").click(function(){
                // 获取提交数据
                // 方法一 获取全部
                // console.log($("#studentFrom").serializeArray()); 获取form表单中所有要提交的信息
                // console.log($("#studentFrom").serializeArray());

                // 方式二 一个一个获取
                let name = $("#name").val();
                let tel = $("#tel").val();
                let sno = $("#sno").val();
                
                // 提交学生信息到后端
                $.post("https://unicloud.codecore.cn/ms/studentCreate",{
                    student_name:escape(name),// 后端有问题 先将汉字转换成 机器码
                    tel:tel,
                    sno:sno
                },function(res){
                    console.log(res);
                    if(res.errCode == 0){
                        // 提示添加成功
                        location.reload()// 刷新当前页面
                    }else{
                        // 提示添加失败
                    }
                })
            })
            // 进入页面直接获取所有学生信息(后期添加获取班级下的学生信息)
            $.get("http://unicloud.codecore.cn/ms/studentAll",{},function(res){
                // 1. 获取到改班级所有的学生信息 后端返回的是一个数组 res
                for (let i = 0; i < res.length; i++){
                    // 3. 循环该数组 将数组中元素拼接到下面字符串对应的位置
                    const elem = res[i];
                    /**
                     * 4.  使用es6 ${}字符串拼接
                     *     后端没有传递序号 由前端for循环的i充当
                     *     时间需要我们手动转化一下格式
                     */ 
                    $("#tbody").append( $(`<tr>
                            <td>${i+1}</td>
                            <td>${elem.sno}</td>
                            <td>${elem.name}</td>
                            <td>${elem.department_name}</td>
                            <td>${elem.class_name}</td>
                            <td>${elem.major_name}</td>
                            <td>${elem.create_time}</td>
                            <td>
                                <button class="btn btn-success btn-sm" data-id="${elem._id}">编辑</button>
                                <button class="btn btn-danger btn-sm" data-id="${elem._id}">删除</button>
                            </td>
                        </tr>`))
                }
            })
            // 当点击删除按钮触发、
            $("#tbody").delegate("button.btn-danger","click",function(){
                // $(this).data() 获取点击元素上的data属性中存放的数据
                let data= $(this).data();// data数据格式是{id:"字符串"}比较符合后端要求 可以直接传递
                $.post("http://unicloud.codecore.cn/ms/studentRemove",data,function(params){
                    if(params.errCode == 0){
                        location.reload()
                    }else{
                        alert("删除异常")
                    }
                })
            });
            // 点击时跳转编辑页面
            $("#tbody").delegate("button.btn-success", "click",function(){
                let data = $(this).data();
                // 跳转到新页面 并将要编辑的数据的id编号带过去
                location.href = `./edit_student.html?id=${data.id}`
            });
    })
    </script>
</body>

</html>